import './index.scss';
import dayjs from 'dayjs';
import { Form, Input, Select, DatePicker, Button, Space } from 'antd';
import { getMembershipInfo } from '@/config/request/opsManager';
import { useState, useEffect } from 'react';
import { useMount } from 'ahooks';

const OpsMemberAdd = (props: any) => {
    const { formModal, onCallback } = props;
    const { form } = formModal;
    const [membershipInfoList, setMembershipInfoList] = useState([]);
    const [selectValue, setSelectValue] = useState('');
    const [memberships, setMemberships] = useState({});

    const getCustomerInfo = async () => {
        try {
            const params = await form.getFieldsValue();

            const responseParam = await getMembershipInfo({
                customerId: params.customerId,
            });
            setMemberships({});
            setSelectValue('');

            if (responseParam.data.code === 200) {
                setMembershipInfoList(
                    responseParam.data.data.membershipInfoList
                );
                form.setFieldsValue({
                    superCustomerId: responseParam.data.data.superCustomerId,
                    operatePerson: responseParam.data.data.operatePerson,
                    customerName: responseParam.data.data.customerName,
                    membershipTemplateName:
                        responseParam.data.data.membershipTemplateName,
                    stationCode: responseParam.data.data.customerStationCode,
                });
            }
        } catch (error) {
            console.log(error);
        }
    };

    const handleChange = (event) => {
        setSelectValue(event);
    };

    useEffect(() => {
        membershipInfoList.map((membershipInfo) => {
            if (membershipInfo['discountActualPrice'] == selectValue) {
                setMemberships(membershipInfo);
            }
        });

        form.setFieldsValue({
            membershipFee: selectValue,
            membership: memberships['templateNameZh'],
            membershipTemplateName: memberships['priceName'],
        });

        onCallback(memberships);
    });

    return (
        <>
            <Form
                name="editOpsMemberInfo"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                form={form}
            >
                <Form.Item
                    label="客户id"
                    name="customerId"
                    className="form-item-box"
                    rules={[{ required: true, message: '请输入客户ID' }]}
                >
                    <Input
                        placeholder="请输入客户id"
                        onBlur={getCustomerInfo}
                    />
                </Form.Item>
                <Form.Item
                    label="请选择会员"
                    name="membership"
                    className="form-item-box"
                    rules={[
                        {
                            required: true,
                            message: '请选择会员等级',
                        },
                    ]}
                >
                    <Select
                        value={selectValue}
                        onChange={handleChange}
                        options={membershipInfoList.map((membershipInfo) => ({
                            label: membershipInfo['templateNameZh'],
                            value: membershipInfo['discountActualPrice'],
                        }))}
                    />
                </Form.Item>
                <Form.Item
                    label="赠送时长（天）"
                    name="day"
                    className="form-item-box"
                    rules={[{ required: true, message: '请输入' }]}
                >
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item
                    label="工单编号"
                    name="workOrderId"
                    className="form-item-box"
                    rules={[{ required: true, message: '请输入' }]}
                >
                    <Input placeholder="请输入" />
                </Form.Item>
                <Form.Item
                    label="超级客户id"
                    name="superCustomerId"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
                <Form.Item
                    label="会员金额"
                    name="membershipFee"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
                <Form.Item
                    label="会员等级"
                    name="membershipTemplateName"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
                <Form.Item
                    label="客户名称"
                    name="customerName"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
                <Form.Item
                    label="所属站点"
                    name="stationCode"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
                <Form.Item
                    label="操作人"
                    name="operatePerson"
                    className="form-item-box"
                >
                    <Input type="text" readOnly bordered={false} />
                </Form.Item>
            </Form>
        </>
    );
};

export default OpsMemberAdd;
